<template>
    <div class="tradeitem">
<!--        <el-avatar :size="110" src="https://img2.baidu.com/it/u=3666548066,2508071679&fm=26&fmt=auto" style="margin-left: 24px"></el-avatar>-->
        <img v-if="data.imgUrl == null" src="https://img2.baidu.com/it/u=3666548066,2508071679&fm=26&fmt=auto" class="ImgUrl">
        <img v-else :src="data.imgUrl" class="ImgUrl">
        <div class="content">
            <div class="title">{{data.title}}</div>
            <div class="time">{{data.tradeTime}}</div>
            <div class="workid_and_price">
                <div class="workid">作品ID:{{data.id}}</div>
                <div class="price">交易金额：￥{{data.price}}</div>
            </div>
            <div class="hashCode">作品哈希：{{data.hashCode}}</div>
        </div>
    </div>
</template>

<script>
    export default {
        name: "tradeitem",
        props:{
            data:{
                type:Object,
                default:{},
            }
        },
        data(){

            return{

            }

        },

    }
</script>

<style scoped>
    .tradeitem{
        width: 509px;
        height: 159px;
        background: #FFFFFF;
        display: flex;
        align-items: center;
        cursor: pointer;
    }
    .ImgUrl{
        margin-left: 24px;
        width: 111px;
        height: 111px;
        border-radius: 50%;
        object-fit: fill;
    }
    .content{
        flex-grow: 1;
        margin-left: 25px;
    }
    .title{
        font-size: 16px;
        font-family: Microsoft YaHei;
        font-weight: bold;
        color: #282828;
        opacity: 1;
    }
    .time{
        margin-top: 6px;
        font-size: 12px;
        font-family: Microsoft YaHei;
        font-weight: 400;
        color: #999999;
        opacity: 1;
    }
    .workid_and_price{
        display: flex;
        justify-content: space-between;
        margin-top: 15px;
    }
    .workid{
        font-size: 14px;
        font-family: Microsoft YaHei;
        font-weight: 400;
        color: #282828;
        opacity: 1;
    }
    .price{
        font-size: 14px;
        font-family: Microsoft YaHei;
        font-weight: 400;
        color: #282828;
        opacity: 1;
        margin-right: 70px;
    }
    .hashCode{
        width: 324px;
        margin-top: 5px;

        font-size: 14px;
        font-family: Microsoft YaHei;
        font-weight: 400;
        color: #282828;
        opacity: 1;



        /*文本溢出省略号*/
        overflow: hidden;
        text-overflow:ellipsis;
        white-space: nowrap;
    }
</style>
